<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
            <el-form-item label="渠道来源" prop="channelId">
                <el-select
                    v-model="queryParams.channelId"
                    placeholder="渠道来源"
                    clearable
                >
                    <el-option
                        v-for="cl in channelList"
                        :key="cl.channelId"
                        :label="cl.channelName"
                        :value="cl.channelId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="线索状态" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="线索状态"
                    clearable
                >
                    <el-option
                        v-for="cs in clue_status"
                        :key="cs.value"
                        :label="cs.label"
                        :value="cs.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="queryParams.dateRange"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div>
            <v-chart class="chart" :option="option"/>
        </div>
        <div>
            <el-table :data="clueData" style="width: 100%" border stripe>
                <el-table-column prop="x" label="时间" width="180" />
                <el-table-column prop="y" label="线索增量" width="180" />
                <el-table-column prop="y2" label="线索存量" />
            </el-table>
        </div>
    </div>
</template>


<script setup name="ClueAnalysis">
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart, LineChart, BarChart} from "echarts/charts";
import "echarts/lib/component/grid"
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from "echarts/components";
import VChart, {THEME_KEY} from "vue-echarts";
import {ref, provide, getCurrentInstance} from "vue";
import {clueAnalysisData} from "@/api/tienchin/analysis";
import {listChannel} from "@/api/tienchin/clue";

const {proxy} = getCurrentInstance();
const {clue_status} = proxy.useDict("clue_status");
const channelList = ref([]);
const clueData = ref([]);

use([
    CanvasRenderer,
    PieChart,
    LineChart,
    BarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);

provide(THEME_KEY, "light");

const option = ref({
    title: {
        text: "线索分析",
        left: "center"
    },
    //在鼠标移动到点上的时候显示对应的数据
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['增量数据', '存量数据'],
        bottom: 0,
    },
    xAxis: {
        data: [],
    },
    yAxis: {},
    series: [{
        type: 'line',
        data: [],
        name: '存量数据'
    }, {
        type: 'line',
        data: [],
        name: '增量数据'
    }]
});

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        phone: undefined,
        owner: undefined,
        channelId: undefined,
        dateRange: undefined,
        status: undefined
    }
});

const {queryParams} = toRefs(data);

function handleQuery() {
    getList();
}

function handleClueData(data) {
    clueData.value = JSON.parse(JSON.stringify(data.increase));
    let totalClue = data.total;
    for (let i = 0; i < totalClue.length; i++) {
        clueData.value[i].y2 = totalClue[i].y;
    }
}

function getList() {
    clueAnalysisData(proxy.addDateRange(queryParams.value, queryParams.value.dateRange)).then(response => {
        let data = response.data;
        //后端返回的增量和存量数据
        let increaseClue = data.increase;
        let totalClue = data.total;
        //分别设置两个表中需要显示数据的属性
        let increaseData = new Object();
        increaseData.name = '增量数据';
        increaseData.type = 'line';
        let totalData = new Object();
        totalData.name = '存量数据';
        totalData.type = 'line';
        //x轴的数据
        option.value.xAxis.data = [];
        //设置两个数组接收后端传回的对应数据
        increaseData.data = [];
        totalData.data = [];
        for (let i = 0; i < increaseClue.length; i++) {
            option.value.xAxis.data.push(increaseClue[i].x);
            increaseData.data.push(increaseClue[i].y);
            totalData.data.push(totalClue[i].y);
        }
        option.value.series = [];
        //最后将组合好的数据 设置到option.value.series
        option.value.series.push(increaseData);
        option.value.series.push(totalData);
        handleClueData(data);
    });

}

function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}


function getAllChannels() {
    listChannel().then(response => {
        channelList.value = response.data;
    })
}

getAllChannels();

getList();
</script>

<style scoped>
.chart {
    height: 400px;
}
</style>